<template>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item>电影院管理</el-breadcrumb-item>
         <el-breadcrumb-item>电影院列表</el-breadcrumb-item>
     </el-breadcrumb>
     <el-divider></el-divider>
     <el-divider content-position="left">影院列表</el-divider>
 
    <div id='cinemaListMapContainer' style="width:100%;height:300px;border:1px solid #aaa"></div>
      <el-table :data="tableData" style="width: 100%" height="300">
        <el-table-column align="center" prop="cinema_name" label="影院名称" width="270" sortable></el-table-column>
        <el-table-column align="center" prop="address" label="影院地址" width="280"></el-table-column>
        <el-table-column align="center" prop="city" label="影院位置" width="180" sortable>
          <template slot-scope="scope">
            {{scope.row.city}} {{scope.row.district}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="260">
           <template slot-scope="scope">
             <el-button type="primary" icon="el-icon-location-information" circle
              @click="showMapcenter(scope.row.longitude,scope.row.latitude)"
             ></el-button>         
             <el-button type="success" icon="el-icon-s-unfold" circle
              @click="$router.push(`/home/cinema-room-list/${scope.row.id}`)"
             ></el-button>
             <el-button type="warning" icon="el-icon-edit" circle 
             @click="$router.push(`/home/cinema-update/${scope.row.id}`)"
             ></el-button>
             <el-button type="danger" icon="el-icon-delete" circle 
              @click="showdelete(scope.row.id)"
             ></el-button>
        </template>
        </el-table-column>
    </el-table>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
 window._AMapSecurityConfig = {
         securityJsCode:'650b975fd5b0578deadff44022aa4e9e',
     }
    export default {  
        data() {
            return {
             tableData:[],
             map:null,
            }
        }, 
        methods: {
          //删除电影院
          showdelete(id){
          const h = this.$createElement;
          this.$msgbox({
          title: '删除电影院 ',
          message: h('p', null, [
            h('span', null, '确认要删除该影城吗？ '),
            h('i', { style: 'color: teal' })
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '正在删除...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 800);
            } else {
              done();
            }
          }
        }).then(action => {
            this.$http.cinemaApi.del({id:id}).then(res => {
                if(res.data.code == 200){
                    this.$message({
                      type: 'success',
                       message:'删除成功', 
                    });   
                  this.Cinemas()
                }
            })    
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
          });   
        })
       },
          //影院位置显示
          showMapcenter(lng,lat){
            if(this.map != null){
              this.map.setCenter([lng,lat],false,1000)
              this.map.setZoom(18,false,1000)
            }
          },
          //加载电影列表
          Cinemas(){
             this.$http.cinemaApi.list().then(res => {
              console.log(res)
              if(res.data.code){
                 this.tableData = res.data.data
              }  
             })
          },
          //地图显示
       Mapcatiner(){
            AMapLoader.load({
            "key": "c1eb7a1a92b7737a93997ac96f70714f",    // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
       }).then((AMap)=>{
         this.map = new AMap.Map('cinemaListMapContainer',{
        zoom:11,//级别
        center: [106.499226,29.583324],//中心点坐标
        viewMode:'3D'//使用3D视图
       });
       //将所有影院位置显示在地图中
       this.tableData.forEach(item => {
            let lng = item.longitude
            let lat = item.latitude
            let marker = new AMap.Marker({
            position: new AMap.LngLat(lng,lat),   // 经纬度对象，也可以是经纬度构成的一维数组
            });
            this.map.add(marker);
        })
      }).catch(e => {
         console.log(e);
        })
         }
        },
        mounted(){
        this.Cinemas()
        this.Mapcatiner()
    }
    }
</script>

<style lang="less" scoped>
  
</style>